<template>
  <div class="my_topic" ref="wrapper">
    <div class="main-room">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <template v-for="i in listData">
            <div class="t-item" :key="i.id">
              <tpm :i="i" />
              <span class="s-tag">
                <van-tag type="primary" v-if="i.is_check == 1">已审核</van-tag>
                <van-tag type="warning" v-else>待审核</van-tag>
              </span>
            </div>
          </template>
        </van-list>
        <!-- <div style="height:40px;"></div> -->
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import tpm from "../components/TopicItem";
export default {
  name: "my-topic",
  components: { tpm },
  data() {
    return {
      cates: [
        { name: "我的发帖", val: 1 },
        { name: "我的收藏", val: 2 }
      ],
      active: 1,
      k: "",
      listData: [],
      current: 1,
      isLoading: false,
      page: 1,
      loading: false,
      finished: false,
      paddingTop: 0,
      scroll: 0
    };
  },
  methods: {
    onClickRight() {
      this.$router.go(-1);
    },
    onLoad() {
      this.indexList();
    },
    onRefresh() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.page = 1;
      this.finished = false;
      this.listData = [];
      this.indexList();
    },
    todetail(row) {
      this.$router.push({ name: "detail", params: row });
    },
    indexList() {
      this.$api
        .GetUserPosts({
          p: this.page++
        })
        .then(r => {
          r.data.info.map(e => (e.current = 1));
          this.listData = [...this.listData, ...r.data.info];
          this.isLoading = false;
          this.loading = false;
          if (r.data.info.length == 0) this.finished = true;
          this.$toast.clear();
        });
    }
  },
  created() {
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
  },
  activated() {
    this.$refs.wrapper.scrollTop = this.scroll;
    this.$refs.wrapper.addEventListener("scroll", this.saveScroll);
  },
  deactivated() {
    this.$refs.wrapper.removeEventListener("scroll", this.saveScroll);
  },
  mounted() {
    this.$refs.wrapper.addEventListener("scroll", this.saveScroll);
  }
};
</script>

<style lang="less">
.t-item {
  position: relative;
  .s-tag {
    position: absolute;
    top: 0px;
    right: 20px;
  }
}
.my_topic {
  background: #fff;
  min-height: 100vh;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.head-height {
  height: 40px;
}
.top-head {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 999999;
}
</style>
